<!--
 * @Author: yanzengyong 709402944@qq.com
 * @Date: 2025-08-18 10:35:26
 * @LastEditors: yanzengyong 709402944@qq.com
 * @LastEditTime: 2025-08-21 20:15:40
 * @FilePath: /cyj-boot-parent/cyj-boot-web/src/views/demo/pure/Table/createDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    destroyOnClose
    :width="'80%'"
    :title="title"
    :defaultFullscreen="true"
    @ok="handleSubmit"
    :showOkBtn="!formDisabled"
    wrapClassName="custom-basic-model"
  >
    <MultipleFormInpExample ref="multipleFormInpExample" :showFooter="false" :formDisable="formDisabled" />
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, unref, defineEmits } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import MultipleFormInpExample from '../MultipleFormInpExample/index.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  // Emits声明
  const emit = defineEmits(['register', 'onSuccess']);
  const isUpdate = ref(false);
  const formDisabled = ref(false);

  const $message = useMessage();

  // 确认按钮
  const multipleFormInpExample = ref();
  const handleSubmit = () => {
    multipleFormInpExample.value.getSubmitParams().then((res) => {
      console.log('res---通过该参数进行新增/编辑的操作', res);
      if (isUpdate.value) {
        $message.createMessage.success('编辑成功！');
      } else {
        $message.createMessage.success('新增成功！');
      }
      closeModal();
      emit('onSuccess');
    });
  };

  //设置标题
  let title = ref('');
  //表单配置
  //表单赋值
  const [registerModal, { closeModal }] = useModalInner(async (data) => {
    console.log('我被执行了啊哈哈哈哈哈哈哈哈哈哈', data);
    //重置表单
    multipleFormInpExample.value.onReset();
    isUpdate.value = !!data?.isUpdate;
    formDisabled.value = data?.readonly;
    title.value = data?.title ?? '列表新增';
    if (unref(isUpdate)) {
      multipleFormInpExample.value.setFieldsValue({
        ...data.record,
      });
    }
  });
</script>

<style lang="less" scoped>
  @import '/@/design/reference/form.less';
</style>
